<template>
    <div class="app-container forget">
        <van-nav-bar title="忘记密码" left-arrow @click-left="$router.back()">
        </van-nav-bar>
        <div class="app-padding">


            <br />
            <van-form @submit="onSubmit">
                <h4 class="form-label">请填写手机号</h4>
                <van-field v-model="email" name="email" placeholder="请填写手机号" autocomplete="off"
                    :rules="[{ required: true, message: '请填写手机号' }]" />
                <h4 class="form-label">验证码</h4>
                <van-field v-model="code" name="code" type="digit" autocomplete="off" placeholder="请填写验证码"
                    :rules="[{ required: true, message: '请填写验证码' }]">
                    <template #button>
                        <van-button @click="onGetVerifyCode" :disabled="codeGetDisable" :loading="codeGetLoading"
                            class="empty-background text-color-light" size="small" type="success">
                            {{ getCodeShow }}
                        </van-button>
                    </template>
                </van-field>
                <h4 class="form-label">密码</h4>
                <van-field v-model="password" type="password" name="password" placeholder="请填写密码,至少8位包括数字和大小写字母"
                    :rules="[{ required: true, message: '请填写密码,至少8位包括数字和大小写字母' }]" />
                <h4 class="form-label">确认密码</h4>
                <van-field v-model="password2" type="password" name="password2" placeholder="请再次填写密码"
                    :rules="[{ required: true, message: '请再次填写密码' }]" />
                <div style="margin: 30px 0;">
                    <van-button block type="primary" :loading="loading" native-type="submit">提交</van-button>
                </div>
            </van-form>
        </div>
    </div>
</template>

<script>
import { getEmailCode, resetPassword } from '@/api/login'
import { showToast } from 'vant'
export default {
    name: 'ForgetPassword',
    data() {
        return {
            email: '',
            password: '',
            password2: '',
            code: '',
            loading: false,
            codeGetLoading: false,
            codeGetDisable: false,
            countDown: 60,
            getCodeShow: '获取验证码'
        }
    },
    created() {

    },
    methods: {
        onGetVerifyCode() {
            if (this.codeGetLoading) {
                return
            }
            if (!this.email) {
                showToast('请填写邮箱或手机号')
                return
            }
            this.codeGetLoading = true
            const that = this
            let countDown = () => {
                that.countDown -= 1
                if (that.countDown > 0) {
                    that.$nextTick(() => {
                        that.getCodeShow = that.countDown
                    })
                    setTimeout(countDown, 1000)
                } else {
                    this.codeGetDisable = false
                    that.$nextTick(() => {
                        that.getCodeShow = '获取验证码'
                    })
                }
            }
            getEmailCode(this.email, 'forget').then(() => {
                this.codeGetLoading = false
                this.codeGetDisable = true
                this.countDown = 61
                countDown()
            }).catch((err) => {
                showToast(err)
                this.codeGetLoading = false
            })
        },
        onSubmit() {
            if (!this.email) {
                showToast('请填写手机号')
                return
            }
            if (!this.code) {
                showToast('请填写验证码')
                return
            }
            if (!this.password) {
                showToast('请填写密码,至少8位包括数字和大小写字母')
                return
            }
            if (this.password != this.password2) {
                showToast('两次密码输入不一致')
                return
            }
            this.loading = true
            resetPassword({ email: this.email, code: this.code, password: this.password }).then(() => {
                this.loading = false
                this.$router.replace('/login')
            }).catch((err) => {
                showToast(err)
                this.loading = false
            })
        },
        onLangChange() {
            if (!this.codeGetLoading) {
                this.getCodeShow = this.$t('login.getVerifyCode')
            }
        }
    },
    computed: {
    }

}
</script>
<style lang="less" scoped>
.form-label {
    font-weight: 500;
    font-size: 14px;
    padding-top: 10px;
}

.van-field {
    margin: 10px 0;
}
</style>